<template>
  <van-form @submit="modifyPasswordSubmit" ref="form">
    <van-dialog v-model:show="modifyPwd.visible" :before-close="onConfirm" title="修改密码"
                show-cancel-button>
      <van-cell-group inset>
        <van-field
            v-model="modifyPwd.oldPassword" maxlength="16"
            type="password"
            name="当前密码"
            placeholder="当前密码"
            :rules="[{ required: true, message: '请填写当前密码' }]"
        />
        <van-field
            v-model="modifyPwd.password" maxlength="16"
            type="password"
            name="新密码"
            placeholder="新密码"
            :rules="[{ required: true, message: '请填写新密码' },{pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[$@!%*?&])[A-Za-z\d$@!%*?&]{6,16}$/,
            message: '密码至少6位，仅含且必须含有数字和字母以及在\'!@#$%^&*?\'这些特殊字符' }]"
        />
      </van-cell-group>
    </van-dialog>
  </van-form>

  <van-cell icon="user-o" :title="user.username" :value="user.remark">
  </van-cell>
  <van-space/>
  <van-cell title="修改密码" icon="edit" is-link @click="modifyPwd.visible = true">
  </van-cell>

  <van-space/>
  <van-row>
    <van-col offset="2" span="20">
      <van-button type="danger" block @click="logout" size="small">退出登录
        <icon-export/>
      </van-button>
    </van-col>
  </van-row>
</template>

<script>
import {get, postPK} from "@/js/axios_util";
import {IconExport} from "@arco-design/web-vue/es/icon";
import {showConfirmDialog, showToast} from 'vant';

import {ref} from "vue";
import {doExchangeByCachePk} from "@/js/dh";
import {getUserError} from "@/js/error_code";

const form = ref();

const currentUser = "currentUser";
export default {
  name: 'settings',
  components: {
    IconExport
  },
  setup() {
    return {
      form
    }
  },
  data() {
    return {
      user: {},
      modifyPwd: {
        visible: false,
        oldPassword: '',
        password: ''
      }

    }
  }
  , created() {
    let item = localStorage.getItem(currentUser);
    this.user = JSON.parse(item);
  }, methods: {
    // 利用对话框的确定按钮校验并提交表单
    onConfirm(action) {
      // 取消则直接关闭
      if (action === 'confirm') {
        // 无论校验成功失败都阻止关闭
        return form.value.validate().then(() => {
          form.value.submit();
          return false;
        }).catch(() => {
          return false;
        });
      }
      return true;
    },
    modifyPasswordSubmit() {
      doExchangeByCachePk((keyAgreeResult, aesEncode) => {
        let url = '/user/modifyPassword';
        postPK(url, {
          password: aesEncode(this.modifyPwd.password, keyAgreeResult.secret),
          oldPassword: aesEncode(this.modifyPwd.oldPassword, keyAgreeResult.secret)
        }, keyAgreeResult, resp => {
          let data = resp.data;
          if (data.success) {
            showToast("修改成功");
            this.modifyPwd.visible = false;
            this.modifyPwd.password = '';
            this.modifyPwd.oldPassword = '';
            return
          }
          const reason = getUserError(data.statusCode);
          showToast(`操作失败[${reason}]`)
        })
      })
    }, logout() {
      showConfirmDialog({
        title: '确定',
        message: '是否登出?',
      }).then(() => {
        let toLogin = () => {
          localStorage.removeItem(currentUser);
          //switch_page.switchPageTo(switch_page.m.login, {});
          location.reload();
        }
        get('/login/logout', toLogin, toLogin)
      }).catch(() => {

      })


    }
  }
}
</script>
<style>

</style>